import 'package:cloud_medicine/http/config.dart';
import 'package:cloud_medicine/model/medicine_detail.dart';
import '../http/shop_api.dart';
import 'package:cloud_medicine/pages/medicine_edit.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

const APPBAR_SCROLL_OFFSET = 100; //滚动最大距离

class MedicineDetail extends StatefulWidget {
  final isManage;
  final medicineId;
  MedicineDetail({Key key, this.medicineId, this.isManage = false})
      : super(key: key);

  @override
  _MedicineDetailState createState() => _MedicineDetailState();
}

class _MedicineDetailState extends State<MedicineDetail> {
  static MedicineItem _medicineDetail;
  bool _loading = false;
  Future<Null> _init() async {
    setState(() {
      _loading = true;
    });

    dynamic res = await getMedicineInfo_api(
        '$backIP/shop/medicineInfo', {'medicineID': widget.medicineId}); //接口路径
    _medicineDetail = MedicineItem.init(res['data']);
    print('-----------------');
    print(_medicineDetail.pictures.length);
    if (mounted) {
      setState(() {
        _loading = false;
      });
    }

    return;
  }

  @override
  void initState() {
    super.initState();
    _init();
  }

  Widget _childLayout() {
    if (_loading) {
      return Center(
        child: Container(
          child: CircularProgressIndicator(),
        ),
      );
    } else {
      return Stack(
        //实现悬浮的appbar功能
        children: <Widget>[
          MediaQuery.removePadding(
            //用于移除默认的padding
            removeTop: true, //设置移除顶部
            context: context,
            child: NotificationListener(
              //监听列表滚动，以实现滚动渐变
              // ignore: missing_return
              onNotification: (scrollNotification) {
                //滚动回调
                if (scrollNotification is ScrollUpdateNotification &&
                    scrollNotification.depth == 0) {
                  //depth=0，指只监听下面第一个部件的滚动，过滤banner的滚动，即只监听listview的滚动
                  _onScroll(scrollNotification.metrics.pixels);
                }
              },
              child: ListView(
                children: <Widget>[
                  Container(
                    height: 200, //如不设置高度，会不显示
                    child: Swiper(
                      //实现轮播图
                      itemCount: _medicineDetail.pictures.length,
                      autoplay: true,
                      itemBuilder: (BuildContext context, int index) {
                        return Image.network(
                          _medicineDetail.pictures[index],
                          fit: BoxFit.fill,
                        );
                      },
                      pagination: SwiperPagination(), //指示器
                    ),
                  ),
                  Container(
                    height: 1000,
                    // color: Colors.blue,
                    child: Text(_medicineDetail.see,
                        style: TextStyle(fontSize: 30)),
                  ),
                ],
              ),
            ),
          ),
          Opacity(
            //改变透明度实现渐变
            child: Container(
                padding: MediaQuery.of(context).padding, //顶部被遮挡的高度
                width: MediaQuery.of(context).size.width, //屏幕宽度
                height: 90,
                decoration: BoxDecoration(color: Colors.white),
                child: Column(
                  children: <Widget>[
                    Text(
                      _medicineDetail.name,
                      style:
                          TextStyle(fontSize: 23, fontWeight: FontWeight.w600),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        Container(
                          child: Text('￥${_medicineDetail.price}'),
                        ),
                        Container(
                          child: Text('库存:${_medicineDetail.number}'),
                        ),
                      ],
                    )
                  ],
                )),
            opacity: appBarAlpha,
          ),
        ],
      );
    }
  }

  // static Map<String, dynamic> _medicineDetail = {
  //   'name': '阿莫西林',
  //   'identity': false,
  //   'kind': '消炎止咳',
  //   'number': 14,
  //   'pictures': [
  //     'http://cdn.120askimages.com/ask/upload/jkjy/201504/water/jkjy_14288143947481.jpg',
  //     'http://cdn.120askimages.com/ask/upload/jkjy/201504/water/jkjy_14288143947481.jpg',
  //     'http://cdn.120askimages.com/ask/upload/jkjy/201504/water/jkjy_14288143947481.jpg'
  //   ],
  //   'price': 35,
  //   'see': 'see',
  // };

  _onScroll(offset) {
    //offset:滚动距离
    double alpha = offset / APPBAR_SCROLL_OFFSET;
    if (alpha < 0) {
      alpha = 0;
    } else if (alpha > 1) {
      alpha = 1;
    }
    setState(() {
      appBarAlpha = alpha;
    });
  }

  double appBarAlpha = 0;

  // List _bannerimg = _medicineDetail.pictures;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _childLayout(),
      floatingActionButton: widget.isManage
          ? Container(
              margin: EdgeInsets.only(left: 30),
              width: double.infinity,
              child: RaisedButton(
                  color: Colors.blue,
                  child: Text(
                    '修改药品',
                    style: TextStyle(color: Colors.white),
                  ),
                  onPressed: () {
                    Navigator.of(context).push(MaterialPageRoute(
                        builder: (BuildContext context) => MedicineEdit(
                              name: _medicineDetail.name,
                              price: _medicineDetail.price.toString(),
                              describe: _medicineDetail.see,
                              number: _medicineDetail.number,
                              id: widget.medicineId,
                            )));
                  }),
            )
          : Container(),
    );
  }
}
